<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Bootstrap Dashboard</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="all,follow">
	<!-- Bootstrap CSS-->
	<link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
	<!-- Font Awesome CSS-->
	<link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.min.css}">
	<!-- Fontastic Custom icon font-->
	<link rel="stylesheet" th:href="@{/css/fontastic.css}">
	<!-- Google fonts - Roboto -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
	<!-- jQuery Circle-->
	<link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
	<!-- Custom Scrollbar-->
	<link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
	<!-- theme stylesheet-->
	<link rel="stylesheet" th:href="@{/css/style.default.css}" id="theme-stylesheet">
	<!-- Custom stylesheet - for your changes-->
	<link rel="stylesheet" th:href="@{/css/custom.css}">
	<!-- Favicon-->
	<link rel="shortcut icon" th:href="@{/img/favicon.ico}">
	<!-- Tweaks for older IEs--><!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<!-- Side Navbar -->
<nav class="side-navbar" th:replace="index::left">
	<div class="side-navbar-wrapper">
		<!-- Sidebar Header    -->
		<div class="sidenav-header d-flex align-items-center justify-content-center">
			<!-- User Info-->
			<div class="sidenav-header-inner text-center"><img src="img/avatar-7.jpg" alt="person" class="img-fluid rounded-circle">
				<h2 class="h5">Nathan Andrews</h2><span>Web Developer</span>
			</div>
			<!-- Small Brand information, appears on minimized sidebar-->
			<div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center"> <strong>B</strong><strong class="text-primary">D</strong></a></div>
		</div>
		<!-- Sidebar Navigation Menus-->
		<div class="main-menu">
			<h5 class="sidenav-heading">Main</h5>
			<ul id="side-main-menu" class="side-menu list-unstyled">
				<li><a href="index.html"> <i class="icon-home"></i>Home                             </a></li>
				<li><a href="forms.html"> <i class="icon-form"></i>Forms                             </a></li>
				<li class="active"><a href="charts.html"> <i class="fa fa-bar-chart"></i>Charts                             </a></li>
				<li><a href="tables.html"> <i class="icon-grid"></i>Tables                             </a></li>
				<li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Example dropdown </a>
					<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
						<li><a href="#">Page</a></li>
						<li><a href="#">Page</a></li>
						<li><a href="#">Page</a></li>
					</ul>
				</li>
				<li><a href="login.html"> <i class="icon-interface-windows"></i>Login page                             </a></li>
				<li> <a href="#"> <i class="icon-mail"></i>Demo
					<div class="badge badge-warning">6 New</div></a></li>
			</ul>
		</div>
		<div class="admin-menu">
			<h5 class="sidenav-heading">Second menu</h5>
			<ul id="side-admin-menu" class="side-menu list-unstyled">
				<li> <a href="#"> <i class="icon-screen"> </i>Demo</a></li>
				<li> <a href="#"> <i class="icon-flask"> </i>Demo
					<div class="badge badge-info">Special</div></a></li>
				<li> <a href=""> <i class="icon-flask"> </i>Demo</a></li>
				<li> <a href=""> <i class="icon-picture"> </i>Demo</a></li>
			</ul>
		</div>
	</div>
</nav>
<div class="page">
	<!-- navbar-->
	<header class="header" th:replace="index::header">
		<nav class="navbar">
			<div class="container-fluid">
				<div class="navbar-holder d-flex align-items-center justify-content-between">
					<div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
						<div class="brand-text d-none d-md-inline-block"><span>Bootstrap </span><strong class="text-primary">Dashboard</strong></div></a></div>
					<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
						<!-- Notifications dropdown-->
						<li class="nav-item dropdown"> <a id="notifications" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-bell"></i><span class="badge badge-warning">12</span></a>
							<ul aria-labelledby="notifications" class="dropdown-menu">
								<li><a rel="nofollow" href="#" class="dropdown-item">
									<div class="notification d-flex justify-content-between">
										<div class="notification-content"><i class="fa fa-envelope"></i>You have 6 new messages </div>
										<div class="notification-time"><small>4 minutes ago</small></div>
									</div></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item">
									<div class="notification d-flex justify-content-between">
										<div class="notification-content"><i class="fa fa-twitter"></i>You have 2 followers</div>
										<div class="notification-time"><small>4 minutes ago</small></div>
									</div></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item">
									<div class="notification d-flex justify-content-between">
										<div class="notification-content"><i class="fa fa-upload"></i>Server Rebooted</div>
										<div class="notification-time"><small>4 minutes ago</small></div>
									</div></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item">
									<div class="notification d-flex justify-content-between">
										<div class="notification-content"><i class="fa fa-twitter"></i>You have 2 followers</div>
										<div class="notification-time"><small>10 minutes ago</small></div>
									</div></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong> <i class="fa fa-bell"></i>view all notifications                                            </strong></a></li>
							</ul>
						</li>
						<!-- Messages dropdown-->
						<li class="nav-item dropdown"> <a id="messages" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-envelope"></i><span class="badge badge-info">10</span></a>
							<ul aria-labelledby="notifications" class="dropdown-menu">
								<li><a rel="nofollow" href="#" class="dropdown-item d-flex">
									<div class="msg-profile"> <img src="img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
									<div class="msg-body">
										<h3 class="h5">Jason Doe</h3><span>sent you a direct message</span><small>3 days ago at 7:58 pm - 10.06.2019</small>
									</div></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item d-flex">
									<div class="msg-profile"> <img src="img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div>
									<div class="msg-body">
										<h3 class="h5">Frank Williams</h3><span>sent you a direct message</span><small>3 days ago at 7:58 pm - 10.06.2019</small>
									</div></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item d-flex">
									<div class="msg-profile"> <img src="img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div>
									<div class="msg-body">
										<h3 class="h5">Ashley Wood</h3><span>sent you a direct message</span><small>3 days ago at 7:58 pm - 10.06.2019</small>
									</div></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong> <i class="fa fa-envelope"></i>Read all messages    </strong></a></li>
							</ul>
						</li>
						<!-- Languages dropdown    -->
						<li class="nav-item dropdown"><a id="languages" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link language dropdown-toggle"><img src="img/flags/16/GB.png" alt="English"><span class="d-none d-sm-inline-block">English</span></a>
							<ul aria-labelledby="languages" class="dropdown-menu">
								<li><a rel="nofollow" href="#" class="dropdown-item"> <img src="img/flags/16/DE.png" alt="English" class="mr-2"><span>German</span></a></li>
								<li><a rel="nofollow" href="#" class="dropdown-item"> <img src="img/flags/16/FR.png" alt="English" class="mr-2"><span>French                                                         </span></a></li>
							</ul>
						</li>
						<!-- Log out-->
						<li class="nav-item"><a href="login.html" class="nav-link logout"> <span class="d-none d-sm-inline-block">Logout</span><i class="fa fa-sign-out"></i></a></li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

		<!-- 内容 -->
		<div class="main">
			<div class="container">
				<div class="row">
					<div class="col-8">

					</div>

				</div>
				
				<!-- 通知列表 -->
				<ul class="list-unstyled mt-4">
					<li class="media pb-3 pt-3 mb-2" th:each="map:${notices}">
						<img th:src="@{/img/notify.png}" class="mr-4 rounded-circle user-header" alt="系统图标">
						<div class="toast show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true">
							<div class="toast-header">
								<strong class="mr-auto" th:utext="${map.fromUser.username}">落基山脉下的闲人</strong>
								<small th:text="${#dates.format(map.notice.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-25 15:49:32</small>
								<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="toast-body">
								<span th:if="${topic.equals('inwarehouse')}">
									用户
									入库<b th:text="${map.notice.fishname}">帖子</b><b th:text="${map.notice.weight}"></b>斤
									<a class="text-primary">点击查看</a> !
								</span>
								<span th:if="${topic.equals('outwarehouse')}">
									用户
									出库<b th:text="${map.notice.fishname}">帖子</b><b th:text="${map.notice.weight}"></b>斤
									<a class="text-primary">点击查看</a> !
								</span>

							</div>
						</div>
					</li>
				</ul>
				<!-- 分页 -->
				<nav class="mt-5" th:if="${page.rows>0}">
					<ul class="pagination justify-content-center">
						<li class="page-item">
							<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
						</li>
						<li th:class="|page-item ${page.current==1?'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a></li>
						<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
							<a class="page-link" href="#" th:text="${i}">1</a>
						</li>
						<li th:class="|page-item ${page.current==page.total?'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
						</li>
						<li class="page-item">
							<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>


	</div>

	<!-- JavaScript files-->
	<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
	<script th:src="@{/vendor/popper.js/umd/popper.min.js}"> </script>
	<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
	<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"> </script>
	<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>
	<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
	<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
	<script th:src="@{/js/charts-custom.js}"></script>
	<!-- Main File-->
	<script th:src="@{/js/front.js}"></script>
	<script>
		function back() {
			location.href = CONTEXT_PATH + "/notice/list";
		}
	</script>
</body>
</html>
